import { Button, Card, Empty } from "antd"
import type { RedisClient } from "@linksaas-minapp/redis-proxy-api"
import { useEffect, useState } from "react"
import KeyList from "./KeyList";
import AddKeyModal from "./components/AddKeyModal"
import Detail from "./Detail";

export interface ContentProps {
    client: RedisClient | null;
}

function Content(props: ContentProps) {
    const [curKey, setCurKey] = useState("");
    const [newAddKey, setNewAddKey] = useState("");
    const [showAddModal, setShowAddModal] = useState(false);

    useEffect(() => {
        setShowAddModal(false);
    }, [props.client])

    return (
        <Card title={`当前连接:${props.client?.getName() ?? ""}`} extra={
            <Button type="primary" disabled={props.client == null} onClick={e => {
                e.stopPropagation();
                e.preventDefault();
                setShowAddModal(true);
            }}>添加数据</Button>
        } bodyStyle={{ height: "100%", display: "flex", padding: "0px 0px" }}>
            <KeyList client={props.client} newAddKey={newAddKey} onChange={key => setCurKey(key)} />
            <div style={{ flex: 1 }}>
                {(props.client == null || curKey == "") && (
                    <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
                )}
                {props.client != null && curKey != "" && (
                    <Detail client={props.client} curKey={curKey} />
                )}
            </div>
            {showAddModal == true && (
                <AddKeyModal client={props.client} onCancel={() => setShowAddModal(false)}
                    onOk={key => {
                        setNewAddKey(key);
                        setShowAddModal(false);
                    }} />
            )}
        </Card>
    );
}

export default Content;